<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">


    <title>武侯祠管理系统</title>
    
   
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

    <style type="text/css">
        .contain{
            width: 80%;
            margin-right: 10%;
            margin-left: 10%;

        }
        .myNav{
            margin-bottom: 20px;
        }
        .aColor{
            color: black;
        }
        .myModal{
            width: 90%;
            margin-left: 20px;
            margin-right: 20px;
        }
        #myTable{
            padding:20px;
        }
    </style>


   
</head>

<body class = " light-green lighten-4">
   

   

    <nav class="myNav">
      <div class="nav-wrapper light-green darken-4">
        <a href="" class="brand-logo">&nbsp武侯祠管理系统</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="./main2.html">主页</a></li>
          <li><a href="./spot.html">景点</a></li>
          <li><a href="./food.html">美食</a></li>
          <li><a href="./toilet.html">厕所</a></li>
          <li><a href="./news.html">新闻</a></li>
          <li><a href="./broadcast.html">广播</a></li>
          <li><a href="./feedback.html">反馈</a></li>
          <li><a href="./password.html">设置</a></li>
        </ul>
      </div>
    </nav>

    <div class="contain" >
        <div class="card  light-green lighten-5" id="myTable">
        <div class="row">
            <h3 class="col s10 offset-s1 center-align">武侯祠今日广播</h3>
            <a class="waves-effect waves-teal btn-flat light-green modal-trigger" 
                style="color:white;margin-top:2.3rem;margin-left:-7%" href="#modal2000">添加</a>
        </div>
        <table class="highlight responsive-table" id="tcontent">
            <thead>
                <tr>
                    <th data-field="date" class="center-align">日期</th>
                    <th data-field="content">内容</th>
                </tr>
            </thead>
            <tbody id="tableBody">                               
            </tbody>
        </table>
    </div>

    </div>



<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/main.js"></script>
<script>
    var lut = []; for (var i=0; i<256; i++) { lut[i] = (i<16?'0':'')+(i).toString(16); }
    var numT =2000;
    
    $('#myTable').append("<div id='modal"+numT+"' class='modal'>"+
        "<div class='modal-content myModal'>"+
        "<form><div class='row'>"+
        "<div class='input-field'>"+
        "<textarea id='mContent"+numT+"' class='materialize-textarea'></textarea>"+
        "<label for='mContent"+numT+"'>内容</label>"+
        "</div></form>"+
        "<div class='modal-footer'>"+
        "<a href='#!' class='modal-action modal-close waves-effect waves-red btn-flat'>取消</a>"+
        "<a href='#!' class='modal-action modal-close waves-effect waves-green btn-flat' onclick='add()'>保存</a>"+
        "</div></div>"
        );     
    var deviceID = getUUID();
    $(document).ready(function(){
        getBroadcaseList();
        
        
    });
    function getBroadcaseList() {
                var settings = {
            type: "POST",
            url: "http://192.168.21.14:8000/info/get_all_broadcast",
            dataType: "json",
            data:{
                device_id:deviceID,
            },
            success: function(data,textStatus) {
                // alert("success");
                for(var i =0; i<data.length; i++){
                    var timestamp = data[i].date;
                    var newDate = new Date();
                    newDate.setTime(timestamp * 1000);
                    var date =  newDate.toLocaleDateString();

                    // var name = data[i].poster;                   
                    var num = data[i].id;
                    var message = data[i].message;

                    addNewRow(num,date,message);

                    $('#myTable').append("<div id='modal"+num+"' class='modal'>"+
                        "<div class='modal-content myModal'>"+
                        "<form><div class='row'>"+                       
                        "<div class='input-field'>"+
                        "<input disabled  value="+date+" id='mDate"+num+"' type='text' class='validate '></div>"+
                        "<div class='input-field'>"+
                        "<p id='mContent"+num+" style='padding-top:10px'>"+message+"</p>"+
                        "<label id=mCon"+num+" for='mContent"+num+"'>内容</label>"+
                        "</div></form>"+
                        "<div class='modal-footer'>"+
                        "<a href='#!' class='modal-action modal-close waves-effect waves-red btn-flat'>取消</a>"+
                        "<a href='#!' class='modal-action modal-close waves-effect waves-red btn-flat' onclick='tdelete("+num+")'>删除</a>"+
                        "</div></div>"
                        );
                }
                $('.modal-trigger').leanModal();
               
            },
            error: function(XHR, textStatus, errorThrown) {
                alert("网络错误" + XHR);
            },
        };
        $.ajax(settings);

    }

    function getDetail(num){     
        $('#mCon'+num).addClass( "active" );     
    }

    function add(){      
        var message = $('#mContent2000').val();
        console.log(message);

        var settings = {
            type: "POST",
            url: "http://192.168.21.14:8000/admin/post_broadcast",
            dataType: "json",
            data:{
                message:message
            },
            success: function(data,textStatus) {
                alert("add");
                // console.log(JSON.stringify(data));
                var num = data.broadcast.id;
                message = data.broadcast.message;
                
                var timestamp = data.broadcast.date;
                var newDate = new Date();
                newDate.setTime(timestamp * 1000);
                var date =  newDate.toLocaleDateString();
                

                preAddNewRow(num,date,message);

                $('#myTable').append("<div id='modal"+num+"' class='modal'>"+
                    "<div class='modal-content myModal'>"+
                    "<form><div class='row'>"+                       
                    "<div class='input-field'>"+
                    "<input disabled  value="+date+" id='mDate"+num+"' type='text' class='validate '></div>"+
                    "<div class='input-field'>"+
                    "<textarea disabled  id='mContent"+num+"' class='materialize-textarea'>"+message+"</textarea>"+
                    "<label id=mCon"+num+" for='mContent"+num+"'>内容</label>"+
                    "</div></form>"+
                    "<div class='modal-footer'>"+
                    "<a href='#!' class='modal-action modal-close waves-effect waves-red btn-flat'>取消</a>"+
                    "<a href='#!' class='modal-action modal-close waves-effect waves-red btn-flat' onclick='tdelete("+num+")'>删除</a>"+
                    "</div></div>"
                    );
                $('.modal-trigger').leanModal();

            },
            error: function(XHR, textStatus, errorThrown) {
                alert("网络错误" + XHR);
            },
        };
        $.ajax(settings);
    }

    function tdelete(num){  
        var settings = {
            type: "POST",
            url: "http://192.168.21.14:8000/admin/delete_broadcast",
            dataType: "json",
            data:{
                id:num
            },
            success: function(data,textStatus) {
                $('#row'+num).remove();
            },
            error: function(XHR, textStatus, errorThrown) {
                alert("网络错误" + XHR);
            },
        };
        $.ajax(settings);

    }


    function addNewRow(num,date,message){
        $('#tcontent').append("<tr id=row"+num+"><td class='center-align'>"+
            "<a class='modal-trigger aColor' onclick='getDetail("+num+")' href='#modal"+num+"'>"+
            date+"</a></td><td>"+
            "<a class='modal-trigger aColor' onclick='getDetail("+num+")' href='#modal"+num+"'>"+message+"</td></tr>");        
    }
    function preAddNewRow(num,date,message){
        $('#tableBody').prepend("<tr id=row"+num+"><td class='center-align'>"+
            "<a class='modal-trigger aColor' onclick='getDetail("+num+")' href='#modal"+num+"'>"+
            date+"</a></td><td>"+
            "<a class='modal-trigger aColor' onclick='getDetail("+num+")' href='#modal"+num+"'>"+message+"</td></tr>");        
    }
    function getUUID() {
    var uuid = getCookie("device_id");
    if (!uuid) {
        uuid = generateUUID();
        setCookie("device_id",uuid,1);
    }
    return uuid;
    }
    
    function generateUUID(){
        var d0 = Math.random()*0xffffffff|0;
        var d1 = Math.random()*0xffffffff|0;
        var d2 = Math.random()*0xffffffff|0;
        var d3 = Math.random()*0xffffffff|0;
        
        return lut[d0&0xff]+lut[d0>>8&0xff]+lut[d0>>16&0xff]+lut[d0>>24&0xff]+'-'+
        lut[d1&0xff]+lut[d1>>8&0xff]+'-'+lut[d1>>16&0x0f|0x40]+lut[d1>>24&0xff]+'-'+
        lut[d2&0x3f|0x80]+lut[d2>>8&0xff]+'-'+lut[d2>>16&0xff]+lut[d2>>24&0xff]+
        lut[d3&0xff]+lut[d3>>8&0xff]+lut[d3>>16&0xff]+lut[d3>>24&0xff];
    }

</script>

</body>
</html>